<template>
  <h1>{{ msg }}</h1>

  <template v-if="config.isShowLink">
    <p>
      For a guide and recipes on how to configure / customize this project,
      <br />
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
        vue-cli documentation
      </a>
      .
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
          target="_blank"
          rel="noopener"
        >
          babel
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
          target="_blank"
          rel="noopener"
        >
          router
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
          target="_blank"
          rel="noopener"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
          target="_blank"
          rel="noopener"
        >
          eslint
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
          target="_blank"
          rel="noopener"
        >
          typescript
        </a>
      </li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank" rel="noopener">
          Core Docs
        </a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank" rel="noopener">
          Forum
        </a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">
          Community Chat
        </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">
          Twitter
        </a>
      </li>
      <li>
        <a href="https://news.vuejs.org" target="_blank" rel="noopener">
          News
        </a>
      </li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li>
        <a href="https://router.vuejs.org" target="_blank" rel="noopener">
          vue-router
        </a>
      </li>
      <li>
        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">
          vuex
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-devtools#vue-devtools"
          target="_blank"
          rel="noopener"
        >
          vue-devtools
        </a>
      </li>
      <li>
        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
          rel="noopener"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </template>

  <div>
    <div v-for="(item, index) in list" :key="index">
      id：{{ item.id }} name：{{ item.name }} age：{{ item.age }}
    </div>
  </div>

  <slot />

  <slot name="test1" />

  <slot name="testParam" :param="`坐标${position.x},${position.y}`" />

  <h1>x：{{ position.x }} y：{{ position.y }}</h1>

  <div class="flex justify-content-center">
    <span class="label">输入：</span>
    <input v-model="text" type="text" @input="handleInput" />
    {{ text }}
  </div>
</template>

<style lang="scss" scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.label {
  @include ellipsis;
}
</style>

<script lang="ts">
// #region 导出
export default {
  name: "HelloWorldByScriptSetup",
};

// 配置
export type ConfigProp = {
  isShowLink: boolean;
};

// 列表
export type ListProp = {
  id: number;
  name: string;
  age: number;
}[];

// 暴露的方法
export type HelloWorldExpose = {
  handleInputClear: () => void;
  getText: () => string;
};
// #endregion
</script>

<script setup lang="ts">
// #region 导入
import {
  defineProps,
  PropType,
  defineEmits,
  ref,
  watch,
  defineExpose,
  onMounted,
} from "vue";
// #endregion

// #region 定义传入的参数
defineProps({
  msg: {
    type: String as PropType<string>,
    default: "",
  },
  config: {
    type: Object as PropType<ConfigProp>,
    default: (): ConfigProp => ({
      isShowLink: false,
    }),
  },
  list: {
    type: Array as PropType<ListProp>,
    default: (): ListProp => [],
  },
});
// #endregion

// #region 定义自定义事件
const emits = defineEmits({
  handleInput: (val: string) => true,
  "update:msg": (val: string) => true,
});
// #endregion

// #region 定义暴露的方法
defineExpose<HelloWorldExpose>({
  handleInputClear,
  getText: () => text.value,
});
// #endregion

// #region 输入框相关
const text = ref("");

// 输入事件
function handleInput(event: Event) {
  const e = event as InputEvent;
  const target = e.target as HTMLInputElement;
  console.log(e, target, target.value);
}

watch(text, function () {
  emits("handleInput", text.value);
});

// 清空输入框
function handleInputClear() {
  text.value = "";
}

// #endregion

// #region 测试 sync
onMounted(function () {
  setTimeout(function () {
    emits("update:msg", "改变了");
  }, 3000);
});
// #endregion

// #region 测试 mixins
import usePosition from "@/mixins/usePosition";

const position = usePosition();

// #endregion
</script>
